<template>
    <div class="colorF" style="width:100%;height:100%;">
        <p class="font_s24" style="line-height:4.225rem;padding-left:1.225rem;">洋泾乡安息堂</p>
        <p class="font_s16" style="line-height:1.825rem;padding-left:1.525rem;"><img style="padding-right:0.625rem;" src="../../../assets/img/comprehensive/bottom/01.png" alt="">杨高中路1702号</p>
        <div class="bgImg_listItem">
            <p class="bgImg_detail detailItem01">1、修复</p>
            <p class="bgImg_detail detailItem02">2、派单</p>
            <p class="bgImg_detail detailItem03">3、检查</p>
            <p class="bgImg_detail detailItem04 detail_active">4、处置</p>
            <p class="bgImg_detail detailItem05">5、整改</p>
        </div>
        <div style="position:absolute;top:49%;left:9.5%;z-index:1;height:28.8rem;overflow:hidden;">
            <img src="../../../assets/img/comprehensive/left/48.png" alt="">
        </div>
        <div class="detail_content">
            <div class="flexC colorF font_s18" style="position:relative;z-index:99;">
                <div class="listItem-leftItem" style="margin-top: 2.25rem;">
                    <p class="leftItem-title">检查 2019-03-20</p>
                    <p class="leftItem-content">发现问题：未安装人流计数系统</p>
                </div>
                <div class="listItem-leftItem">
                    <p class="leftItem-title">处置</p>
                    <p class="leftItem-content">侵犯群众合法权益等</p>
                </div>
                <div class="listItem-leftItem">
                    <p class="leftItem-title">整改</p>
                    <p class="leftItem-content">未配备足够灭火器，有检查记录卡，每月定期检查。</p>
                </div>
                <div class="listItem-leftItem">
                    <p class="leftItem-title">修复</p>
                    <p class="leftItem-content">未按国家有关标准和规定开展殡葬服务等</p>
                </div>
                <div class="listItem-leftItem">
                    <p class="leftItem-title">派单</p>
                    <p class="leftItem-content">未禁止在公墓内燃放烟花、爆竹等</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: 'ListItem'
}
</script>
<style scoped>
.bgImg_listItem {
    background: url(../../../assets/img/comprehensive/bottom/02.png) no-repeat;
    background-size: 100% 100%;
    width: 42%;
    height: 29%;
    margin: 2.825rem auto 1.825rem auto;
}
.bgImg_detail {
    background: url(../../../assets/img/comprehensive/bottom/03.png) no-repeat;
    background-size: 100% 100%;
    width: 7.125rem;
    height: 3.625rem;
    line-height: 3.625rem;
    text-align: center;
    cursor: pointer;
}
.detail_active {
    background: url(../../../assets/img/comprehensive/bottom/04.png) no-repeat;
    background-size: 100% 100%;
}
.detailItem01 {
    position: absolute;
    top: 25%;
    left: 25%;
}
.detailItem02 {
    position: absolute;
    top: 16%;
    left: 42%;
}
.detailItem03 {
    position: absolute;
    top: 25%;
    right: 25%;
}
.detailItem04 {
    position: absolute;
    top: 37%;
    right: 29%;
}
.detailItem05 {
    position: absolute;
    top: 37%;
    left: 32%;
}
.listItem-leftItem {
    margin-left: 1.525rem;
    margin-bottom: 1.225rem;
    /* margin-top: 2.25rem; */
}
.leftItem-title {
    background: url(../../../assets/img/comprehensive/bottom/05.png) no-repeat;
    background-size: 100% 100%;
    width: 10.625rem;
    height: 3.225rem;
    line-height: 3.225rem;
    padding-left: 2.625rem;
}
.leftItem-content {
    /* background: url(../../../assets/img/comprehensive/left/29.png) no-repeat center; */
    /* background-size: 100% 100%; */
    width: 22.285rem;
    line-height: 1.275rem;
    padding:1.225rem 2.225rem;
    margin-left: 0.875rem;
}
.detail_content {
    width:90%;
    height:52%;
    overflow-x:hidden;
    overflow-y: scroll;
}
.detail_content::-webkit-scrollbar {
    display: none;
}
</style>
